import cls from "./Sidebar.module.scss";
import { classNames } from "shared/lib/classNames/classNames";
import { useState } from "react";
import { Button, ThemeButton } from "shared/ui";
import { SizeButton } from "shared/ui/Button/Button";
import { AppLink } from "shared/ui/AppLink/AppLink";
import { useTranslation } from "react-i18next";
import { AboutPageIcon, MainPageIcon } from "shared/assets/icons";

interface SidebarProps {
  className?: string;
}

export const Sidebar = ({ className }: SidebarProps) => {
  const { t } = useTranslation();

  const [collapsed, setCollapsed] = useState(false);

  const onToggle = () => {
    setCollapsed((prev) => !prev);
  };

  return (
    <div
      className={classNames(cls.Sidebar, { [cls.collapsed]: collapsed })}
      data-testid="sidebar"
    >
      <div className={cls.SidebarLinks}>
        <AppLink to={"/"} className={classNames(cls.navbar__text)}>
          {collapsed ? (
            <MainPageIcon fill="var(--primary-color)" />
          ) : (
            <div className={classNames(cls.Links)}>
              <MainPageIcon fill="var(--primary-color)" />
              {t("Главная")}
            </div>
          )}
        </AppLink>
        <AppLink to={"/about"} className={classNames(cls.navbar__text)}>
          {collapsed ? (
            <AboutPageIcon fill="var(--primary-color)"/>
          ) : (
            <div className={classNames(cls.Links)}>
              <AboutPageIcon fill="var(--primary-color)" /> {t("О сайте")}
            </div>
          )}
        </AppLink>
      </div>
      <Button
        onClick={onToggle}
        data-testid="sidebar-toggle"
        className={cls.collapseBtn}
        theme={ThemeButton.SECONDARY}
        square
        size={SizeButton.XL}
      >
        {collapsed ? ">" : "<"}
      </Button>
      <div className={cls.switchers}></div>
    </div>
  );
};
